<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <n-space vertical :size="16" class="p-4">
        <div v-if="!member.externalInvestigations || member.externalInvestigations.length === 0"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12 flex items-center justify-center">
          <n-empty description="暂无政审外调记录" />
        </div>

        <div v-for="(investigation, index) in member.externalInvestigations" :key="index" :id="`investigation-page-${index}`"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-6 text-sm">
          
          <h2 class="text-center font-bold text-lg mb-2">东北大学发展党员政审外调证明材料</h2>
          <p class="text-center mb-4">
            被调查人 <strong class="underline px-2">{{ investigation.personName }}</strong> 
            系我校 <strong class="underline px-2">软件</strong> 学院（部、处）学生（教工） 
            <strong class="underline px-2">{{ member.memberName }}</strong> 的 
            <strong class="underline px-2">{{ investigation.relationshipDesc }}</strong>
          </p>

          <table class="w-full border-collapse border border-solid border-black">
            <tbody>
              <tr>
                <td class="p-1 font-bold border border-solid border-black text-center w-[25%]">姓 &nbsp;&nbsp;&nbsp;名</td>
                <td class="p-1 border border-solid border-black text-center w-[25%]">{{ investigation.personName }}</td>
                <td class="p-1 font-bold border border-solid border-black text-center w-[25%]">出生年月</td>
                <td class="p-1 border border-solid border-black text-center w-[25%]">&nbsp;</td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-solid border-black text-center">民 &nbsp;&nbsp;&nbsp;族</td>
                <td class="p-1 border border-solid border-black text-center">&nbsp;</td>
                <td class="p-1 font-bold border border-solid border-black text-center">政治面貌</td>
                <td class="p-1 border border-solid border-black text-center">&nbsp;</td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-solid border-black text-center">文化程度</td>
                <td class="p-1 border border-solid border-black text-center">&nbsp;</td>
                <td class="p-1 font-bold border border-solid border-black text-center">籍 &nbsp;&nbsp;&nbsp;贯</td>
                <td class="p-1 border border-solid border-black text-center">&nbsp;</td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-solid border-black text-center">工作单位</td>
                <td colspan="3" class="p-1 border border-solid border-black text-center">&nbsp;</td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-solid border-black text-center">现任职务</td>
                <td colspan="3" class="p-1 border border-solid border-black text-center">&nbsp;</td>
              </tr>
              <tr class="h-20">
                <td class="p-1 font-bold border border-solid border-black text-center align-top">有无政治历史问题，结论如何？</td>
                <td colspan="3" class="p-1 border border-solid border-black">无问题。</td>
              </tr>
              <tr class="h-20">
                <td class="p-1 font-bold border border-solid border-black text-center align-top">在“文革”、八九年政治风波及“法轮功”等重大政治事件中有无问题</td>
                <td colspan="3" class="p-1 border border-solid border-black">无问题。</td>
              </tr>
              <tr class="h-20">
                <td class="p-1 font-bold border border-solid border-black text-center align-top">对现阶段党的路线方针政策的态度及现实表现</td>
                <td colspan="3" class="p-1 border border-solid border-black">&nbsp;</td>
              </tr>
              <tr class="h-20">
                <td class="p-1 font-bold border border-solid border-black text-center align-top">家庭主要成员及主要社会关系中有无政治历史问题？</td>
                <td colspan="3" class="p-1 border border-solid border-black">&nbsp;</td>
              </tr>
              <tr class="h-24">
                 <td class="p-1 font-bold border border-solid border-black text-center align-top">被调查人所在部门审查意见</td>
                 <td colspan="3" class="p-1 border border-solid border-black relative">
                    <div class="absolute bottom-1 right-2 text-right">
                        <p class="mb-1">（公章）</p>
                        <p>{{ formatSignatureDate(investigation.signatureDate) }}</p>
                    </div>
                 </td>
              </tr>
              <tr class="h-24">
                 <td class="p-1 font-bold border border-solid border-black text-center align-top">党 组 织<br>审 查 意 见</td>
                 <td colspan="3" class="p-1 border border-solid border-black relative">
                    <div class="absolute bottom-1 right-2 text-right">
                        <p class="mb-1">（公章）</p>
                        <p>{{ formatSignatureDate(investigation.signatureDate) }}</p>
                    </div>
                 </td>
              </tr>
            </tbody>
          </table>
          <p class="text-xs mt-2">注：此外调证明材料无党组织意见及公章无效。</p>
        </div>
      </n-space>
    </div>
 <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
        <n-anchor :bound="500">
          <n-anchor-link 
            v-for="(investigation, index) in member.externalInvestigations"
            :key="`anchor-${index}`"
            :title="`外调证明: ${investigation.personName}`"
            :href="`#investigation-page-${index}`" 
          />
        </n-anchor>
      </div>
    </div>
   
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { NSpace, NEmpty, NAnchor, NAnchorLink, NAffix } from 'naive-ui';

const documentContainer = ref(null);

defineProps({
  member: {
    type: Object,
    required: true,
    default: () => ({ externalInvestigations: [] })
  }
});

const formatSignatureDate = (dateStr) => {
    if (!dateStr) return '    年   月   日';
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}年 ${month}月 ${day}日`;
};
</script>